<template>
    <view class="container">
        <up-sticky bgColor="#fff">
            <!-- placeholderClass="placeholdClass" -->
            <!-- <up-search shape="round" @change="searchItem"></up-search> -->
            <view style="flex: 1;display: flex;align-items: center;justify-content: flex-end;">
                <up-input
                    v-model="inputVal"
                    placeholder="请输入文章关键字"
                    fontSize="14px"
                    color="rgba(0, 0, 0, 0.9)"
                    clearable
                    customStyle="flex:none;width: 90%;height:34px;margin-left:4%;padding: 2px 8px 2px 12px;background: #fff;border-radius:50px"
                    focus
                    @clear="clearInput"
                    @change="searchItem"
                >
                    <template #suffix>
                        <up-icon name="search" @click="searchItem" color="#000" size="24"></up-icon>
                    </template>
                </up-input>
                <!-- <text style="color: rgba(0, 0, 0, 0.4);font-size: 12px;margin-left: 8px;" @click="closeInput">取消</text> -->
            </view>
        </up-sticky>
        <view v-if="newsList.length">
            <view class="container" >
                <view class="searchDom" v-for="(item, index) in newsList" :key="index" @click="itemClick(item)">
                    <view class="title" v-html="item.name"></view>
                    <view class="time">{{ dayjs.unix(item.dateline).format('YYYY-MM-DD HH:mm:ss')+'·'+item.username }}</view>
                </view>
            </view>
            <view style="width: 100%;text-align: center;color: #DEDEDE;font-size: 14px;">已经到底了~</view>
        </view>
        <view class="empty" v-if="!newsList.length && showEmpty" >
            <up-empty 
             mode="未搜索到相关文章"
             icon="/static/empty.png"
             ></up-empty>
             <text class="font">未搜索到相关文章</text>
        </view>
    </view>
    
	
</template>

<script setup lang="ts">
    import { ref,defineEmits } from 'vue'
    import { onLoad,onShareAppMessage } from '@dcloudio/uni-app'
    import { articleSearchAPI, threadSearchAPI } from '@/api/news'
    import dayjs from 'dayjs'
    const newsList = ref([])
    const inputVal = ref('')
    const type = ref('')
    const showEmpty = ref(false)
    //搜索结果
	const searchItem = async (item:any) =>{
		console.log('item',item)
        if(!item){
            newsList.value = []
            showEmpty.value = true
            return
        }
        const params = {
            keyword:item
        }
        let res:any = ''
        if(type.value == '1'){
            res = await articleSearchAPI(params)
        }else{
            res = await threadSearchAPI(params)
        }
        
        console.log('searchText',res)
        if(!res) {
            newsList.value = []
            showEmpty.value = true
            return
        }else{
            showEmpty.value = false
        }
        res.forEach((items:any)=>{
           items.name = highlight(items.title,item)
        })
        newsList.value = res
        // if(!res.length){
        //     showEmpty.value = true
        // }
        
        console.log('searrch',newsList.value)
	}
    //清空
    const clearInput = ()=>{
        inputVal.value = ''
        searchItem('')
    }
    //进详情页
    const itemClick = (item:any)=>{
        // console.log('item->',item)
        if(type.value == '1'){
            uni.navigateTo({
                url:`/pagesA/index/detail?mod=view&aid=${item.aid}`
            })
        }else{
            uni.navigateTo({
                url:`/pagesA/index/detail?mod=viewthread&tid=${item.tid}`
            }) 
        }
        
    }
    //高亮方法正则替换为HTML元素
    const highlight=(name:any,key:any)=>{
        
        let regExp = new RegExp(key, 'gi');
        if(key == '.'){
            regExp = /\./g
        }
        console.log('key->',regExp)
        return name.replace(regExp, match => {
            return `<span style="color: #2A65FF;">${match}</span>`; //可以定义高亮的样式
        });
    }
    onLoad((option:any)=>{
        console.log('option->',option)
        type.value = option?.type
    })
</script>

<style lang="scss" scoped>
   .placeholdClass{
        color: red;
    }
    .container{
        width: 95%;
        margin-left: 2%;
        margin-top: 5px;
        .searchDom{
            // height: 67px;
            width: 100%;
            margin-left: 2%;
            // padding: auto;
            padding: 2px 0 2px 0;
            gap: 12px;
            align-self: stretch;

            box-sizing: border-box;
            /* color/stroke */
            border-width: 0px 0px 1px 0px;
            border-style: solid;
            border-color: #DEDEDE;
            // background-color: red;

            z-index: 1;
            .title{
                font-family: PingFang SC;
                font-size: 14px;
                margin-top: 5px;
                font-weight: normal;
                line-height: 100%;
                letter-spacing: 0px;
                padding-top: 14px;
                color: rgba(0, 0, 0, 0.9)
            }
            .time{
                font-family: PingFang SC;
                font-size: 13px;
                font-weight: normal;
                line-height: 100%;
                letter-spacing: 0px;
                margin-top: 12px;
                margin-bottom: 14px;
                /* base/font/gy3 */
                color: rgba(0, 0, 0, 0.4)
            }
        }
        .empty{
            margin-top: 120px;
            text-align: center;
            .font{
                font-family: PingFang SC;
                font-size: 12px;
                font-weight: normal;
                line-height: 100%;
                text-align: center;
                color: rgba(0, 0, 0, 0.24);
            }
        }
    }
</style>